<template>
	<view>
		<up-cell  title="省" arrow-direction="down">
				<!-- <up-badge count="99" :absolute="false" slot="right-icon"></up-badge> -->
				<template #value>
					 <picker  @change="getPro" :range="proList" range-key="name">
					    <view class="picker">
							当前选择：{{proList[proindex].name}}
					    </view>
					  </picker>
				</template>
		</up-cell>
		<up-cell  title="市" arrow-direction="down">
				<!-- <up-badge count="99" :absolute="false" slot="right-icon"></up-badge> -->
				<template #value>
					 <picker v-if="cityList.length!=0"  @change="changeCity" :range="cityList" range-key="name">
					    <view class="picker" >
					      当前选择：{{cityList[cityIndex].name}}
					    </view>
					  </picker>
				</template>
		</up-cell>
		<up-cell  title="区" arrow-direction="down">
				<!-- <up-badge count="99" :absolute="false" slot="right-icon"></up-badge> -->
				<template #value>
					 <picker  @change="areaChange" v-if="areaList.length!=0" :range="areaList" range-key="name">
					    <view class="picker">
					      当前选择：{{areaList[areaIndex].name}}
					    </view>
					  </picker>
				</template>
		</up-cell>
		<up-cell  title="姓名" arrow-direction="down">
			<template #value>
					<input ></input>
			</template>
		</up-cell>
		<up-cell  title="手机号" arrow-direction="down">
			<template #value>
					<input ></input>
			</template>
		</up-cell>
		<up-cell  title="详细地址" arrow-direction="down">
			<template #value>
					<input ></input>
			</template>
		</up-cell>
		<view>
				<button type="primary">保存</button>
				<button type="warn">删除地址</button>
		</view>
	</view>
	
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import {addAddress} from '@/api/address.js'
	
	// 添加接口需要的数据-----------------
	let formObj=reactive({
		token: uni.getstoragesync('token'),
		linkMan:"", //联系人
		address:"", //详细
		mobile:"",//联系人
		code:"", //邮编
		isDefault:"true",//是否默认,
		provinceId:"", //省id
		cityId:"",//市id
		districtId:"",//区id
	})
	// 获取省的数据
	let proList=ref([])//省的数据
	let getProvince=()=>{
		uni.request({
			url:"https://api.it120.cc/common/region/v2/province",
			method:"get",
			success(res){
				console.log(res,"省的数据")
				proList.value=res.data.data;
				proList.value.unshift({name:"请选择",id:0})
			}
		})
	}
	getProvince();
	
	// 省的改变事件
	let proindex=ref(0)
	let nowPro=ref({})//当前省
	// 省的change事件
	let getPro=(e)=>{
		console.log(e,"省的改变事件")
		// e.detail.value---3 小程序自带picker收集是下标
		proindex.value=e.detail.value//存储省的下标
		nowPro.value=proList.value[e.detail.value] //当前省=省列表[省下标]
		formObj.provinceId=nowPro.value.id//存储当前省id
		// 省的变化内部 调用市的列表
			getNext(nowPro.value.id,'city')
	}
	// 获取市 或者区
	let cityList=ref([])
	let areaList=ref([])
	let getNext=(pid,status)=>{
		    uni.request({
				url:"https://api.it120.cc/common/region/v2/child",
				method:"get",
				data:{
					pid //省id   或市的id
				},
				success(res){
					console.log(res,"市的数据或区的数据")
					if(status=='city'){
						// 市的数据
						cityList.value=res.data.data
					}
						
					if(status=='area'){
						// 区的数据
						areaList.value=res.data.data;
					}
				
					
				}
			})
	}
	// 市的change事件
	let cityIndex=ref(0)
	let nowCity=ref({})
	let changeCity=(e)=>{
		cityIndex.value=e.detail.value;//当前市的下标
		nowCity.value=cityList.value[e.detail.value] //当前市
		formObj.cityId=nowCity.value.id//存市的id
		// 市的change事件内部调用获取区
		getNext(nowCity.value.id,'area') //传的市的id
	}
	
	// 区的change事件
	let areaIndex=ref(0)
	let areaChange=(e)=>{
		areaIndex.value=e.detail.value;
		formObj.districtId=cityList.value[e.detail.value].id;
	}
	
</script>

<style>
</style>